<template>
	<Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <h1>
            <img class="logo" :src="require('../../../images/logo.png')" alt="">
            <span>慢病管理云平台</span>
        </h1>
		<Menu width="auto" :class="menuitemClasses">
			<Submenu v-for="(menu,i) in menus" :key="i" :name="key+1">
				<template slot="title">
					<Icon :size="20" type="ios-body-outline" />{{menu.resourceName}}
				</template>
				<!-- <MenuItem name="1-1" to="/patient">患者列表</MenuItem> -->
				<!-- <MenuItem name="1-2" to="/watchData">监测记录</MenuItem> -->
			</Submenu>
		</Menu>
	</Sider>
</template>
<script>
import { mapState, mapMutations } from '@lib/x_.js'
export default {
	data() {
		return {
            isCollapsed: false
        }
	},
	computed: {
		...mapState(['hidemenu','menus']),
		menuitemClasses() {
			return ['menu-item', this.isCollapsed ? 'collapsed-menu' : '']
		}
	},
	methods: {
		collapsedSider() {
			this.$refs.side1.toggleCollapse()
		}
	}
}
</script>

<style lang='scss'>
.root {
    .logo{
        position: relative;
        top: 10px;
    }
    // #EAEDF1
    h1{
        color: #fff;
        font-size: 16px;
        line-height: 59px;
        height: 59px;
        text-align: center;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        position: relative;
        z-index: 99;
        // border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
    }
	.ivu-menu-vertical .ivu-menu-item:hover,
	.ivu-menu-vertical .ivu-menu-submenu-title:hover {
		color: rgba(255, 255, 255, 0.5);
	}
	.ivu-menu {
		color: #fff;
		a {
			color: #fff;
		}
	}
	.ivu-menu-submenu {
		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
    }
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff;
    }
    .ivu-menu-vertical.ivu-menu-light:after{
        display: none;
    }
    
}
</style>